<template>
	<div class="widget-camera flex flex-wrap">
		<img class="widget-camera-block relative pointer hover-border-active flex-noshrink"
			:style="{width:imgWidth,height:imgHeight}" @click.prevent.stop="$emit('click',src)" :src="src" />
	</div>
</template>

<script>
export default {
	name: "WidgetCamera",
	props: {
		src: {
			type: String,
			default: () => {
				return "";
			}
		},
		imgWidth: {
			type: String,
			default: "400px"
		},
		imgHeight: {
			type: String,
			default: "300px"
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/styles/animations/focus.scss";
.widget-camera {
	.widget-camera-block {
		margin-bottom: 8px;
		&:hover .handler {
			opacity: 1;
		}
		.handler {
			opacity: 0;
			transition: opacity 0.25s;
		}
		&.active {
			@extend .focus-shadow;
		}
	}
	&.left .widget-camera-block {
		margin-right: 8px;
	}
	&.right .widget-camera-block {
		margin-left: 8px;
	}
}
</style>